import React from 'react';
import { Form, Row, Col, Button, Icon } from 'antd';
import { getScreenType } from '@/components/utils';
import styles from './index.less';

const margin8 = {
  marginLeft: 8,
};

@Form.create()
class SearchForm extends React.PureComponent {
  static defaultProps = {
    formItems: [],
    grid: {
      gutter: { xs: 24, sm: 12, md: 8, lg: 24, xl: 32 },
    },
    submitText: '查询',
    resetText: '重置',
    onReset: () => {},
    onSubmit: () => {},
  };

  constructor(props) {
    super(props);
    this.rowRef = React.createRef();
    this.state = {
      screen: getScreenType(),
      expandForm: false,
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this.resizeFormItems);
    this.resizeFormItems();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeFormItems);
  }

  resizeFormItems = () => {
    this.setState({
      screen: getScreenType(),
    });
  };

  toggleForm = () => {
    const { expandForm } = this.state;
    this.setState({
      expandForm: !expandForm,
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { onSubmit, form } = this.props;
    onSubmit(form, e);
  };

  handleReset = e => {
    const { onReset, form } = this.props;
    form.resetFields();
    onReset(form, e);
  };

  render() {
    const { formItems, form, grid, submitText, resetText, ...formProps } = this.props;
    if (!form) return null;

    const defaultGrid = Object.assign(
      {
        gutter: { xs: 8, sm: 12, md: 24, lg: 24, xl: 24, xxl: 24 },
        xs: 24,
        sm: 12,
        md: 8,
        lg: 8,
        xl: 8,
        xxl: 6,
      },
      grid,
    );
    const { screen, expandForm } = this.state;
    const { gutter, ...col } = defaultGrid;
    const length = 24 / col[screen] - 1 || 1;
    const push = expandForm ? (length - (formItems.length % (length + 1))) * col[screen] : 0;
    const { getFieldDecorator } = form;

    return (
      <div className={styles.tableListForm}>
        <Form layout="inline" {...formProps} onSubmit={this.handleSubmit}>
          <Row gutter={gutter} ref={this.rowRef}>
            {expandForm
              ? formItems.map(item => (
                  <Col key={item.name} {...col}>
                    <Form.Item label={item.label}>
                      {getFieldDecorator(item.name, item.options)(item.component)}
                    </Form.Item>
                  </Col>
                ))
              : formItems.slice(0, length).map(item => (
                  <Col key={item.name} {...col}>
                    <Form.Item label={item.label}>
                      {getFieldDecorator(item.name, item.options)(item.component)}
                    </Form.Item>
                  </Col>
                ))}
            <Col {...col} push={push}>
              <span>
                <Button type="primary" htmlType="submit">
                  {submitText}
                </Button>
                <Button type="default" style={margin8} onClick={this.handleReset}>
                  {resetText}
                </Button>
                <a style={margin8} onClick={this.toggleForm}>
                  {expandForm ? (
                    <span>
                      收起 <Icon type="up" />
                    </span>
                  ) : (
                    <span>
                      展开 <Icon type="down" />
                    </span>
                  )}
                </a>
              </span>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}

export default SearchForm;
